<template>
  <a-modal v-model:open="open" :title="'模型评估'" :width="800" centered :after-close="reset" :confirm-loading="confirmLoading" @ok="onOk">
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item name="name" label="任务名称">
        <a-input v-model:value="formState.name" placeholder="请输入服务名称" :maxlength="200" />
      </a-form-item>
      <a-form-item name="type" label="评估指标">
        <a-input v-model:value="formState.type" placeholder="请输入服务名称" :maxlength="200" />
      </a-form-item>
      <a-form-item name="dataIds" label="测试集">
        <g-select-tree-data
          ref="selectDataBucketRef"
          v-model:checkedIds="formState.dataIds"
          type-name="数据集"
          :has-modal="false"
          :get-tree-data-api="selectTreeDataApi.dataBucketTree"
          :get-collect-tree-data-api="selectTreeDataApi.collectDataBucketTree"
          :get-list-data-api="selectTreeDataApi.searchBucketList"
          :get-collect-list-data-api="selectTreeDataApi.collectSearchBucketList"
          :field-names="{ children: 'children', title: 'name', key: 'id' }"
        >
          <template #selected-tools>
            <a-tooltip title="仅从已选数据集中抽取满足“数据处理规则”格式条件的文件">
              <i class="iconfont icon-information-fill text-color-4 ml-8 h-22"></i>
            </a-tooltip>
          </template>
        </g-select-tree-data>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
  import type { FormInstance } from 'ant-design-vue'
  import type { Rule } from 'ant-design-vue/es/form'
  import { cloneDeep } from 'g6-fn'
  import { computed, ref } from 'vue'

  import { mirrorManageApi, selectTreeDataApi } from '@/services/api'
  import { validateBitLen, validateDirName } from '@/utils'

  export interface Props {
    afterCloseFn?: () => void
  }

  const props = withDefaults(defineProps<Props>(), {
    afterCloseFn: () => {}
  })

  interface FormState {
    id?: string
    name: string
    type: string
    dataIds: any[]
    description: string
  }

  const open = ref(false)
  const formRef = ref<FormInstance>()
  const formState = ref<FormState>({
    name: '',
    type: '',
    dataIds: [],
    description: ''
  })

  const rules: Record<string, Rule[]> = {
    name: [
      { required: true, trigger: 'change', message: '请输入服务名称' },
      { validator: validateDirName('服务名称') },
      { validator: validateBitLen(200), trigger: 'change' }
    ],
    dataIds: [{ required: true, trigger: 'change', message: '请选择测试集' }]
  }
  const confirmLoading = ref(false)
  const onOk = async () => {
    await formRef.value?.validateFields()
    // confirmLoading.value = true
    console.log('表单', mirrorManageApi)
  }

  const reset = () => {
    formRef.value?.resetFields()
    formState.value = {
      name: '',
      type: '',
      dataIds: [],
      description: ''
    }
  }

  defineExpose({
    open: () => {
      open.value = true
    }
  })
</script>

<style lang="less" scoped>
  .dress-input {
    :deep(input) {
      border-radius: 0 6px 6px 0 !important;
    }
  }
</style>
